<template>
    <div>
        <view class="submitOrder">
            <div class="info">
                <div class="order-msg">
                    <div class="msg1">
                        <span v-if="formData.selectMaterial && formData.mode == '物资'">{{ formData.selectMaterial
                            }}</span>
                        <span v-if="formData.selectedGuaranteedMaterials && formData.mode == '物资'">保底{{
                            formData.selectedGuaranteedMaterials }}</span>
                        <span v-if="formData.selectInsurance && formData.mode == '物资'">保险:{{ formData.selectInsurance
                            }}</span>
                        <span v-if="formData.currentLevel && formData.toLevel && formData.mode == '等级'">等级{{
                            formData.currentLevel
                            }}级-{{ formData.toLevel }}级</span>
                        <span v-if="formData.safesNumber && formData.mode == '赛季3X3保险箱'">3X3保险箱{{ formData.safesNumber
                            }}个</span>
                    </div>
                </div>
                <div class="preferred-price">
                    <div class="title">优选价</div>
                    <div class="price">
                        <span class="price-value-amount">{{ price }}</span> 元
                    </div>
                    <div class="time">{{ time }}小时</div>
                    <div class="tip">指定高级代练，安全高效，胜率保证，专区展示</div>
                    <image @click="showPricePicker" src="../../../../static/icons/edit.png"></image>
                </div>
            </div>
            <div class="login-mode">
                <div class="tab">账号密码登录</div>
                <div class="username">
                    <div class="label">游戏账号</div>
                    <div class="handle">
                        <input type="text" placeholder="请输入您的游戏账号" v-model="gameAccount">
                    </div>
                </div>
                <div class="username">
                    <div class="label">游戏密码</div>
                    <div class="handle">
                        <input type="password" placeholder="请输入您的游戏密码" v-model="gamePassword">
                    </div>
                </div>
                <div class="phone">
                    <div class="label">游戏角色</div>
                    <div class="handle">
                        <input type="text" placeholder="请输入您的游戏角色名" v-model="gameRole">
                    </div>
                </div>
                <div class="phone">
                    <div class="label">号主手机（必填）</div>
                    <div class="handle">
                        <input type="number" placeholder="请输入您的手机号" v-model="ownerPhone">
                    </div>
                </div>
                <div class="contact">
                    <div class="label">发单者联系方式（必填）</div>
                    <div class="handle">
                        <input type="text" placeholder="请输入发单者的联系方式" v-model="contactInfo">
                    </div>
                </div>
            </div>
            <div class="special-task">
                <div class="label">特殊要求</div>
                <div class="handle" @click="showSpecialPicker">
                    <view class="selected-tag">
                        {{ '保证金/订单要求等' }}
                        <image src="../../../../static/icons/arrow-down.png"></image>
                    </view>
                </div>
            </div>
            <div class="footer">
                <div class="button" @click="submitOrder">发布订单</div>
            </div>
        </view>
        <!-- 优选价弹窗 -->
        <uni-popup ref="pricePopup" type="bottom">
            <view class="popup-content">
                <view>
                    <div class="level">
                        <span>价格（元）</span>
                        <input type="number" placeholder="请输入价格" v-model="price">
                    </div>
                    <div class="role">
                        <span>时限（小时）</span>
                        <input type="number" placeholder="请输入时限" v-model="time">
                    </div>
                </view>
                <view class="popup-footer2">
                    <span class="cancel" @click="hidePricePicker">取消</span>
                    <span class="confirm" @click="confirmPricePicker">确认</span>
                </view>
            </view>
        </uni-popup>
        <!-- 特殊要求弹窗 -->
        <uni-popup ref="specialPopup" type="bottom">
            <view class="popup-content">
                <div class="title">特殊要求</div>
                <div class="server">
                    <div class="server-title">
                        服务保障
                    </div>
                    <div class="server-content">
                        <div class="server-content-item">
                            <div class="server-content-item-text">安全保证金</div>
                            <div class="server-content-item-value">
                                <input type="number" v-model="securityDeposit">
                            </div>
                            <div class="server-content-item-unit">元</div>
                        </div>
                        <div class="server-content-item">
                            <div class="server-content-item-text">效率保证金</div>
                            <div class="server-content-item-value">
                                <input type="number" v-model="efficiencyDeposit">
                            </div>
                            <div class="server-content-item-unit">元</div>
                        </div>
                    </div>
                </div>
                <div class="order-require">
                    <div class="order-require-title">订单要求</div>
                    <scroll-view scroll-y class="order-require-content">
                        <div class="order-require-content-item">1、未经同意请勿动用账号点卷、物品，不要联系或回复好友信息
                        </div>
                        <div class="order-require-content-item">2、请勿使用外挂，不允许打广告、挂机、恶意骂人等恶意行为
                        </div>
                    </scroll-view>
                </div>
                <div class="special-require" v-if="formData.mode == '物资' || formData.mode == '赛季3X3保险箱'">
                    <div class="special-require-title">特殊要求</div>
                    <div class="special-require-content" v-if="formData.mode == '物资'">
                        <checkbox color="#57b1ff" :checked="specifyMap" @change="specifyMap = !specifyMap"></checkbox>
                        <span style="display: flex;align-items: center;">指定地图
                            <input style="margin-left: 20rpx; border: 1rpx solid #eee; padding: 5rpx 10rpx;" type="text"
                                placeholder="请选择指定地图" v-model="specifiedMapName" :disabled="!specifyMap">
                        </span>
                    </div>
                    <div class="special-require-content" v-if="formData.mode == '赛季3X3保险箱'">
                        <checkbox color="#57b1ff" :checked="mustComplete" @change="mustComplete = !mustComplete">
                        </checkbox>
                        <span style="display: flex;align-items: center;">必完成 未完成0结算 <i
                                style="color: #aaa;margin-left: 20rpx;">加价50%</i></span>
                    </div>
                </div>
                <view class="popup-footer" @click="hideSpecialPicker">确定
                </view>
            </view>
        </uni-popup>
    </div>
</template>

<script>
export default {
    components: {
        // SJZ DL 目前没有显式导入子组件 (除了 uni-popup)
    },
    data() {
        return {
            // 从路由接收的表单数据
            formData: {
                server: '',
                mode: '',
                selectMaterial: '',
                insuranceFlag: false,
                selectInsurance: '',
                selectedGuaranteedMaterials: '',
                currentLevel: '',
                toLevel: '',
                safesNumber: '',
                suggestedPrice: null, // 用于初始化 price
                estimatedTime: null,  // 用于初始化 time
            },
            // 价格和时间
            price: '1',
            time: '2',
            // 登录信息
            gameAccount: '',
            gamePassword: '',
            gameRole: '',
            ownerPhone: '',
            contactInfo: '',
            // 特殊要求 (通用保证金)
            securityDeposit: 5,
            efficiencyDeposit: 5,
            // SJZ 特殊要求绑定
            specifyMap: false,     // 物资: 是否指定地图
            specifiedMapName: '', // 物资: 指定地图名称
            mustComplete: false,   // 保险箱: 是否必完成
        };
    },
    onLoad(options) {
        if (options.formData) {
            try {
                const parsedData = JSON.parse(decodeURIComponent(options.formData));
                this.formData = { ...this.formData, ...parsedData };
                console.log("Received formData (SJZ DL):", this.formData);
                // 使用建议价/时初始化
                this.price = this.formData.suggestedPrice || '1';
                this.time = this.formData.estimatedTime || '2';
            } catch (e) {
                console.error("Failed to parse formData (SJZ DL):", e);
                uni.showToast({ title: '加载订单信息失败', icon: 'none' });
                this.price = '1';
                this.time = '2';
            }
        } else {
            console.warn("No formData found in route params (SJZ DL).");
            this.price = '1';
            this.time = '2';
        }
        // 可选: 预填联系方式
        // this.prefillContactInfo();
    },
    methods: {
        // --- 弹窗方法 (复用) ---
        showPopup(refName) {
            if (this.$refs[refName]) {
                this.$refs[refName].open();
            } else {
                console.error(`Popup ref '${refName}' not found or not ready.`);
                uni.showToast({ title: '组件加载中', icon: 'none' });
            }
        },
        hidePopup(refName) {
            if (this.$refs[refName]) {
                this.$refs[refName].close();
            } else {
                console.error(`Popup ref '${refName}' not found or not ready.`);
            }
        },

        showPricePicker() {
            this.showPopup('pricePopup');
        },
        hidePricePicker() {
            this.hidePopup('pricePopup');
        },
        confirmPricePicker() {
            // 校验
            if (!this.price || isNaN(Number(this.price)) || Number(this.price) <= 0) {
                uni.showToast({ title: '请输入有效价格', icon: 'none' }); return;
            }
            if (!this.time || isNaN(Number(this.time)) || Number(this.time) <= 0) {
                uni.showToast({ title: '请输入有效时限', icon: 'none' }); return;
            }
            this.hidePopup('pricePopup');
        },

        showSpecialPicker() {
            this.showPopup('specialPopup');
        },
        hideSpecialPicker() {
            // 可以在这里加校验，例如如果勾选了指定地图但没填名字
            if (this.specifyMap && !this.specifiedMapName && this.formData.mode === '物资') {
                uni.showToast({ title: '请输入指定的地图名称', icon: 'none' });
                return; // 不关闭弹窗
            }
            this.hidePopup('specialPopup');
        },

        // --- 表单校验 (SJZ DL) ---
        validateForm() {
            if (!this.gameAccount) { uni.showToast({ title: '请输入游戏账号', icon: 'none' }); return false; }
            if (!this.gamePassword) { uni.showToast({ title: '请输入游戏密码', icon: 'none' }); return false; }
            if (!this.gameRole) { uni.showToast({ title: '请输入游戏角色名', icon: 'none' }); return false; }
            if (!this.ownerPhone) { uni.showToast({ title: '请输入号主手机', icon: 'none' }); return false; }
            if (!/^1[3-9]\d{9}$/.test(this.ownerPhone)) { uni.showToast({ title: '请输入正确的手机号', icon: 'none' }); return false; }
            if (!this.contactInfo) { uni.showToast({ title: '请输入联系方式', icon: 'none' }); return false; }
            if (!this.price || isNaN(Number(this.price)) || Number(this.price) <= 0) {
                uni.showToast({ title: '请输入有效价格', icon: 'none' }); return false;
            }
            if (!this.time || isNaN(Number(this.time)) || Number(this.time) <= 0) {
                uni.showToast({ title: '请输入有效时限', icon: 'none' }); return false;
            }
            // SJZ 特殊校验
            if (this.specifyMap && !this.specifiedMapName && this.formData.mode === '物资') {
                uni.showToast({ title: '勾选指定地图后请填写地图名', icon: 'none' }); return false;
            }
            return true;
        },

        // --- 内容安全检查 (占位符) ---
        async checkContent() {
            const contentToCheck = [
                this.gameAccount,
                this.gamePassword,
                this.gameRole,
                this.ownerPhone,
                this.contactInfo,
                this.specifiedMapName,
                // ... 其他需要检查的字段
            ].filter(text => !!text).join(',');

            if (!contentToCheck) return true;

            console.warn("内容安全检查 (checkText API) 需要实现.");
            // try { ... } catch { ... }
            return true; // 模拟检查通过
        },

        // --- 提交订单 (SJZ DL) ---
        async submitOrder() {
            if (!this.validateForm()) return;

            const isContentSafe = await this.checkContent();
            if (!isContentSafe) return;

            uni.showLoading({ title: '正在发布...' });

            // 构建提交数据
            const orderPayload = {
                ...this.formData,
                boost_type: 'DL',
                game_name: 'SJZ', // 游戏名
                game_account: this.gameAccount,
                game_password: this.gamePassword,
                game_role: this.gameRole,
                owner_phone: this.ownerPhone,
                contact_info: this.contactInfo,
                price: parseFloat(this.price),
                time_limit: parseInt(this.time),
                security_deposit: Number(this.securityDeposit) || 0,
                efficiency_deposit: Number(this.efficiencyDeposit) || 0,
                // SJZ 特定字段
                specify_map: this.specifyMap ? this.specifiedMapName : null, // 如果勾选了就传递地图名
                must_complete: this.mustComplete, // 保险箱模式
                // 可以动态生成标题
                title: `三角洲代练 ${this.formData.mode || ''} ...`.trim(),
            };

            // 清理无用或空数据
            delete orderPayload.suggestedPrice;
            delete orderPayload.estimatedTime;
            Object.keys(orderPayload).forEach(key => {
                if (orderPayload[key] === '' || orderPayload[key] === null || orderPayload[key] === undefined) {
                    // 保留 false 和 0 值
                    if (orderPayload[key] !== false && orderPayload[key] !== 0) {
                        delete orderPayload[key];
                    }
                }
            });

            console.log("准备提交的订单数据 (SJZ DL):", orderPayload);
            console.warn("订单提交 API (createOrder) 需要实现.");

            // 模拟 API 调用
            setTimeout(() => {
                uni.hideLoading();
                uni.showToast({ title: '订单发布成功 (模拟)', icon: 'success' });
                // 可跳转
                // uni.redirectTo({ url: '/pages/OrderList/index' });
            }, 1500);

            // 实际 API 调用示例
            // try { ... } catch { ... }
        }
    }
};
</script>

<style scoped>
/* 复用 WWQY/YXLM 的样式，根据需要微调 */
.submitOrder {
    width: 100%;
    min-height: 100vh;
    background-color: #eee;
    padding-bottom: 100rpx;
}

.info {
    padding: 40rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    margin-bottom: 10rpx;
}

.order-msg {
    display: flex;
    flex-direction: column;
}

.order-msg .msg1 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20rpx;
    word-wrap: break-word;
    line-height: 1.5;
}

.order-msg .msg1 span {
    margin-right: 10rpx;
}

.preferred-price {
    width: 100%;
    padding: 20rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    box-shadow: 0px 0px 10px -3px rgba(0, 0, 0, 0.1);
    margin-top: 40rpx;
    position: relative;
    border-radius: 7px;
    border-bottom: 5px solid #57b1ff;
}

.preferred-price .title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20rpx;
}

.preferred-price .price {
    display: flex;
    align-items: baseline;
    font-size: 13px;
    font-weight: 400;
}

.preferred-price .price .price-value-amount {
    font-size: 20px;
    color: red;
    font-weight: bold;
    margin-right: 5rpx;
}

.preferred-price .time {
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 400;
    margin-top: 5rpx;
}

.preferred-price .tip {
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 400;
    color: #aaa;
    margin-top: 30rpx;
    line-height: 1.4;
}

.preferred-price image {
    position: absolute;
    top: 20rpx;
    right: 20rpx;
    width: 40rpx;
    height: 40rpx;
    cursor: pointer;
}

.login-mode {
    margin-top: 10rpx;
    padding: 40rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background-color: #fff;
}

.login-mode .tab {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 40rpx;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #eee;
}

.login-mode .username,
.login-mode .phone,
.login-mode .contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20rpx;
    padding: 10rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    font-size: 14px;
}

.login-mode .username:last-child,
.login-mode .phone:last-child,
.login-mode .contact:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.login-mode .label {
    width: auto;
    flex-shrink: 0;
    margin-right: 20rpx;
    color: #333;
}

.login-mode .handle {
    flex-grow: 1;
    display: flex;
    justify-content: flex-end;
}

.login-mode input {
    text-align: right;
    font-size: 14px;
    color: #333;
    width: 100%;
    border: none;
    background: none;
}

.login-mode input::placeholder {
    color: #aaa;
}

.special-task {
    margin-top: 10rpx;
    padding: 30rpx 40rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
}

.special-task .label {
    font-size: 15px;
    color: #333;
}

.special-task .handle {
    font-size: 14px;
    color: #666;
    cursor: pointer;
}

.selected-tag {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 50rpx;
    font-size: 14px;
    color: #666;
}

.selected-tag image {
    width: 24rpx;
    height: 24rpx;
    margin-left: 10rpx;
}

/* 弹窗样式 */
.popup-content {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
}

.popup-content .title {
    width: 100%;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    padding: 30rpx 20rpx 20rpx;
    box-sizing: border-box;
    border-bottom: 1rpx solid #eee;
}

.server,
.order-require,
.special-require {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 20rpx 40rpx 40rpx;
    box-sizing: border-box;
}

.server-title,
.order-require-title,
.special-require-title {
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 20rpx;
    margin-bottom: 10rpx;
    border-bottom: 1rpx solid #f0f0f0;
}

.server-content,
.order-require-content {
    max-height: 300rpx;
    padding: 0 10rpx;
    box-sizing: border-box;
}

/* Style scroll-view */
.order-require-content {
    display: block;
    width: 100%;
    overflow-y: auto;
}

.server-content-item,
.order-require-content-item {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    margin-top: 15rpx;
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}

.server-content-item-text {
    width: 30%;
    flex-shrink: 0;
}

.server-content-item-value {
    color: #333;
    flex-grow: 1;
    margin: 0 10rpx;
}

.server-content-item-value input {
    width: 100%;
    border: 1rpx solid #ddd;
    padding: 5rpx 10rpx;
    border-radius: 5rpx;
    font-size: 13px;
}

.server-content-item-unit {
    text-align: right;
    color: #333;
    width: 50rpx;
    flex-shrink: 0;
}

/* SJZ 特殊要求样式 */
.special-require-content {
    display: flex;
    align-items: center;
    padding: 0 10rpx;
    box-sizing: border-box;
    margin-top: 20rpx;
    font-size: 14px;
    color: #333;
}

.special-require-content checkbox {
    margin-right: 15rpx;
    transform: scale(.9);
}

.special-require-content input[type="text"] {
    border: 1rpx solid #eee;
    padding: 5rpx 10rpx;
    font-size: 14px;
    border-radius: 5rpx;
    margin-left: 20rpx;
    /* 原样式 */
}

.special-require-content input[type="text"]:disabled {
    background-color: #f5f5f5;
    color: #aaa;
}

.level,
.role {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 40rpx;
    box-sizing: border-box;
    border-bottom: 1rpx solid #eee;
}

.level span,
.role span {
    color: #333;
    font-size: 15px;
}

.level input,
.role input {
    width: 60%;
    text-align: right;
    font-size: 15px;
    color: #333;
    border: none;
}

.popup-scroll {
    max-height: 60vh;
    overflow-y: auto;
}

.popup-item {
    padding: 25rpx 40rpx;
    font-size: 15px;
    color: #333;
    border-bottom: 1px solid #f5f5f5;
    text-align: center;
}

.popup-item:last-child {
    border-bottom: none;
}

.popup-footer {
    width: 100%;
    text-align: center;
    font-size: 16px;
    padding: 25rpx;
    color: #fff;
    background: #57b1ff;
    border-top: 1px solid #eee;
    box-sizing: border-box;
    cursor: pointer;
}

.popup-footer:active {
    background-color: #4a9cec;
}

.popup-footer2 {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: center;
    font-size: 16px;
    color: #999;
    border-top: 1px solid #eee;
    box-sizing: border-box;
}

.popup-footer2 .cancel,
.popup-footer2 .confirm {
    display: block;
    width: 50%;
    padding: 25rpx;
    text-align: center;
    font-size: 16px;
    box-sizing: border-box;
    cursor: pointer;
}

.popup-footer2 .cancel {
    color: #198dda;
}

.popup-footer2 .cancel:active {
    background-color: #f2f2f2;
}

.popup-footer2 .confirm {
    background-color: #198dda;
    color: #fff;
}

.popup-footer2 .confirm:active {
    background-color: #157ab3;
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 86rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: #57b1ff;
    cursor: pointer;
}

.footer .button {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer .button:active {
    background-color: #4a9cec;
}
</style>